<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商业贷款计算器</title>

    <link rel="shortcut icon" href="">
    <link rel="stylesheet" href="css/Public_CSS.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="wrap" id="app" v-cloak>
        <div class="back-title">
            <h1>房贷计算器</h1>
            <span onclick="window.history.back()"></span>
        </div>
        <div class="nav">
            <ul>
                <li><span>商业贷款</span></li>
                <!-- <li><span :class="{active:isB}" @click="active('b')">公积金贷款</span></li> -->
                <!-- <li><span :class="{active:isC}" @click="active('c')">组合贷款</span></li> -->
            </ul>
        </div>
        <div class="calculator">
            <div class="options">
                <div class="input-group">
                    <label>贷款金额</label>
                    <input type="text" v-model="options.money" @change="clearResult"><span>万</span>
                </div>
                <div class="input-group">
                    <label>贷款期限</label>
                    <select v-model="options.expire" @change="clearResult">
                    <option :value="item*12" v-for="item in 30">{{item}}年({{item*12}}期)</option>
                </select>
                </div>
                <div class="input-group">
                    <label>利率</label>
                    <select v-model="options.rate" @change="clearResult">
                    <option :value="item.value" v-for="item in rates">{{item.name}}</option>
                </select>
                </div>
                <div class="input-group">
                    <label>还款方式</label>
                    <select v-model="options.way" @change="clearResult">
                    <option :value="item.value" v-for="item in ways">{{item.name}}</option>
                </select>
                </div>
            </div>
            <div class="divide">
                <strong>计算结果</strong>
                <small>仅供参考，请以实际情况为准</small>
            </div>
            <div class="result">
                <div class="input-group" v-if="options.way === 1">
                    <label>还款第{{i}}期</label>
                </div>
                <div class="input-group">
                    <label>月供金额</label>
                    <span>{{results.payMonth}}</span>
                </div>
                <div class="input-group">
                    <label>总利息</label>
                    <span>{{results.totalInterest}}</span>
                </div>
                <div class="input-group">
                    <label>本息合计</label>
                    <span>{{results.sum}}</span>
                </div>
            </div>
        </div>
        <div class="done">
            <button type="button" @click="clear">清空</button>
            <button type="button" @click="calc">计算</button>
        </div>
    </div>
    <!-- <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> -->
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>

</html>